<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS选择器示例</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <h1 id="main-header">这是一个主标题</h1>

    <div>
        <p>这是一个段落。我是div的直接子元素，字体是斜体。</p>
        <p><span>这是另一个段落。<span>123123</span></span></p>
        <span>这是一个span，我是div的后代，文字有下划线。</span>
    </div>

    <p class="highlight">这是一个带有类名highlight的段落，背景是黄色。</p>

    <a href="https://www.example.com">这是一个链接，颜色是紫色。</a>
    <a id="link-a" href="https://www.example111.com">这是一个链接，颜色是绿色。</a>

    <span>这是一个伪类选择器</span>

</body>
</html>